import React, { memo } from 'react'
import type { FC, ReactNode } from 'react'
import { MainHeaderleft, MainHeaderRight, MainHeaderWrapper } from './style'
import { NavLink } from 'react-router-dom'
import { SearchOutlined } from '@ant-design/icons'
import { Input } from 'antd'

import headerTitles from '@/assets/data/header_titles.json'

interface IProps {
  children?: ReactNode
}

const MainHeader: FC<IProps> = () => {
  // 渲染导航标题
  const renderHeaderTitles = () => {
    return headerTitles.map((item, index) => {
      if (item.type === 'path') {
        return (
          <li key={index} className="nav_item">
            <NavLink to={item.link} className="nav_a">
              {item.title}
              <i className="icon sprite_01"></i>
            </NavLink>
          </li>
        )
      } else {
        return (
          <li key={index} className="nav_item">
            <a
              href={item.link}
              rel="noreferrer"
              target="_blank"
              className="nav_a"
            >
              {item.title}
            </a>
          </li>
        )
      }
    })
  }

  return (
    <MainHeaderWrapper>
      <div className="main_header wrap-v1">
        {/* logo */}
        <h1 className="sprite_01 main_logo">
          <a className="logo_text">网易云音乐</a>
        </h1>
        <MainHeaderleft>
          {/* 主导航 */}
          <div className="main_nav">
            <ul className="nav_ul">{renderHeaderTitles()}</ul>
          </div>
        </MainHeaderleft>

        <MainHeaderRight>
          <Input
            className="search"
            size="small"
            placeholder="音乐/视频/电台/用户"
            prefix={<SearchOutlined />}
          />

          <div className="center">创作者中心</div>

          <a className="login">登录</a>
        </MainHeaderRight>
      </div>
      <div className="line"></div>
    </MainHeaderWrapper>
  )
}

export default memo(MainHeader)
